<template>
  <div class="JNPF-common-layout">
    <div class="JNPF-common-layout-center">
      <el-row class="JNPF-common-search-box" :gutter="16">
        <el-form @submit.native.prevent label-width="80px">
          <el-col :span="6">
            <el-form-item label="客户名称">
              <el-select v-model="listQuery.fsiteNo" :disabled="this.$store.state.user.fsiteLevel==3" clearable filterable placeholder="请选择客户名称">
                  <el-option
                    v-for="item in fsiteNoBelongOptions"
                    :key="item.value"
                    :label="item.label"
                    :value="item.value"/>
                </el-select>
            </el-form-item>
          </el-col>
          <el-col :span="6">
             <el-form-item label="容器编号">
              <el-input v-model="listQuery.fpackno" clearable class="filter-item" style="width: 200px;" placeholder="请输入容器编号"/>
              </el-form-item>
          </el-col>
          <el-col :span="6">
            <el-form-item label="存储分类">
              <el-select
                    v-model="listQuery.fstorageflag"
                    class="filter-item"
                    clearable
                    placeholder="请输入存储分类"
                  >
                    <el-option
                      v-for="item in fstorageflagOptions"
                      :key="item.value"
                      :label="item.label"
                      :value="item.value"
                    />
                  </el-select>
            </el-form-item>
          </el-col>
          <el-col :span="6">
            <el-button @click="handleFilter" type="primary">查找</el-button>
            <el-button  @click="handleCreate" type="success">添加</el-button>
            <el-button @click="handleUpload" type="info">导入</el-button>
          </el-col>
        </el-form>
      </el-row>
      <div class="JNPF-common-layout-main JNPF-flex-main">
       <!-- 查询结果 -->
      <JNPF-table v-loading="listLoading" :data="list" >
          <el-table-column :width="buttonColor.operationTwo" align="center" label="操作" class-name="small-padding">
          <template slot-scope="scope">
            <el-button type="text" @click="handleUpdate(scope.row)">编辑</el-button>
            <el-button type="text" @click="handleDelete(scope.row)">删除</el-button>
          </template>
        </el-table-column>
        <el-table-column :index="indexMethod" :width="buttonColor.line" align="center" label="序号" type="index" />
        <el-table-column :width="buttonColor.billno" align="left" label="容器编号" prop="fpackno" />
        <el-table-column :width="buttonColor.name" align="left" label="容器名称" prop="fpackname" />
        <el-table-column :formatter="formatfstorageflag" align="left" label="存储分类" prop="fstorageflag" />
      </JNPF-table>
      <paginations
        :total="total"
        :page.sync="listQuery.currentPage"
        :limit.sync="listQuery.pageSize"
        />
      </div>
    </div>
    <!-- 添加或修改对话框 -->
    <el-dialog width="70%" :title="textMap[dialogStatus]" :close-on-click-modal="false" :visible.sync="dialogFormVisible">
      <el-row class="JNPF-common-search-box" :gutter="16">
        <el-form @submit.native.prevent label-width="80px"  ref="dataForm" :rules="rules" :model="dataForm">
          <el-col :span="8">
            <el-form-item label="容器编号" prop="fpackno">
              <el-input v-if="dialogStatus=='create'" v-model="dataForm.fpackno"/>
              <el-input v-else disabled v-model="dataForm.fpackno"/>
            </el-form-item>
          </el-col>
          <el-col :span="8">
            <el-form-item  label="存储分类" prop="fstorageflag">
                <el-select
                      v-model="dataForm.fstorageflag"
                      class="filter-item"
                      clearable
                    >
                      <el-option
                        v-for="item in fstorageflagOptions"
                        :key="item.value"
                        :label="item.label"
                        :value="item.value"
                      />
                    </el-select>
              </el-form-item>
          </el-col>
          <el-col :span="8">
            <el-form-item label="容器类型" prop="fclassstno">
              <el-select
                    v-model="dataForm.fclassstno"
                    class="filter-item"
                    clearable
                  >
                    <el-option
                      v-for="item in fclassstnoOptions"
                      :key="item.value"
                      :label="item.label"
                      :value="item.value.toString()"
                    />
                  </el-select>
            </el-form-item>
          </el-col>
          <el-col :span="8">
            <el-form-item  label="容器名称" prop="fpackname">
              <el-input v-model="dataForm.fpackname"/>
            </el-form-item>
          </el-col>
          <el-col :span="8">
             <el-form-item label="容器条码" prop="fbarcode">
              <el-input v-model="dataForm.fbarcode"/>
            </el-form-item>
          </el-col>
          <el-col :span="8">
             <el-form-item label="规格尺寸" prop="fspec">
              <el-input v-model="dataForm.fspec"/>
            </el-form-item>
          </el-col>
          <el-col :span="8">
            <el-form-item  label="容器毛重" prop="fweight">
              <el-input v-model="dataForm.fweight"/>
            </el-form-item>
          </el-col>
          <el-col :span="8">
            <el-form-item label="容器容量" prop="fvolume">
              <el-input v-model="dataForm.fvolume"/>
            </el-form-item>
          </el-col>
          <el-col :span="8">
            <el-form-item label="容器颜色">
              <el-select
                    v-model="dataForm.fcolor"
                    class="filter-item"
                    clearable
                    placeholder="请选择容器颜色"
                  >
                    <el-option
                      v-for="item in fstorageflagOptions"
                      :key="item.value"
                      :label="item.label"
                      :value="item.value"
                    />
                  </el-select>
            </el-form-item>
          </el-col>
          <el-col :span="8">
            <el-form-item label="市场价格" prop="fbuyprice">
              <el-input v-model="dataForm.fbuyprice"/>
            </el-form-item>
          </el-col>
          <el-col :span="8">
            <el-form-item label="容器单位" prop="funit">
              <el-input v-model="dataForm.funit"/>
            </el-form-item>
          </el-col>
        </el-form>
      </el-row>
      <span slot="footer" class="dialog-footer">
        <el-button type="info" @click="dialogFormVisible = false">取消</el-button>
        <el-button  type="primary" v-if="dialogStatus=='create'"  @click="createData">确定</el-button>
        <el-button type="primary" v-else  @click="updateData">确定</el-button>
      </span>
    </el-dialog>
  </div>
</template>

<script>
import { listtsPack, createtsPack, updatetsPack, deletetsPack, getAnyList } from '@/api/tsPack'
import {fsiteOptionsByLevel, getListArea, uploadPath2 } from '@/api/area'
import { getToken } from '@/utils/auth'
import Pagination from '@/components/Pagination'
import moment from 'moment'
import { tableColor,titleColor,exportColor,buttonColor } from '@/filters/index'
import { getApiUrl } from '@/utils/request'
export default {
  name: 'ITsGoodClass',
  components: { Pagination },
  data() {
    return {
      fsiteNoBelongOptions: [], // 客户列表
      downUrl: null,
      uploadVisible: false,
      fstorageflagOptions: [],
      uploadPath2,
      buttonColor,
      fparentnoOptions: [],
      list: null,
      total: 0,
      listLoading: true,
      listQuery: {
        page: 1,
        limit: 20,
        fsiteNo: this.$store.state.user.fsiteNo,
        fpackno: undefined,
        fstorageflag: undefined,
        sort: 'create_time',
        order: 'desc'
      },
      dataForm: {
        fsiteNo: undefined,
        fpackno: undefined,
        fpackname: undefined,
        fgoodno: undefined,
        fbarcode: undefined,
        fengname: undefined,
        fclassstno: undefined,
        fspec: undefined,
        funit: undefined,
        fbuyprice: undefined,
        fstorageflag: undefined,
        fcolor: undefined,
        fweight: undefined,
        fvolume: undefined,
        fweight: undefined,
        fupddate: undefined,
        foperator: undefined,
      },
      tableColor,
      titleColor,
      exportColor,
      dialogFormVisible: false,
      dialogStatus: '',
      textMap: {
        update: '编辑',
        create: '创建'
      },
      rules: {
        fpackno: [
          { required: true, message: '容器编号不能为空' },
        ],
        fpackname: [
          { required: true, message: '容器名称不能为空' },
        ],
        fstorageflag: [
          { required: true, message: '存储分类不能为空' },
        ],
         fclassstno: [
          { required: true, message: '容器类型不能为空' },
        ],
        fweight: [
          { required: true, message: '容器毛重不能为空' },
        ],
      },
      fclassstnoOptions:[]
    }
  },
  created() {
    this.downUrl = getApiUrl() + 'xlsx/1-4容器资料.xlsx'
    this.getList()
    // 客户列表
    fsiteOptionsByLevel(3)
      .then(response => {
        this.fsiteNoBelongOptions = response.data.data.list
      })
      .catch(() => {
        this.fsiteNoBelongOptions = []
      })
    // 存储分类
    getListArea({ flag: 28 })
      .then((response) => {
        this.fstorageflagOptions = response.data.data.list;
      })
      .catch(() => {
        this.fstorageflagOptions = [];
      });
      getAnyList({ valueColumn:'fdictno',labelColumn:'fdictname',tableName:'s_ts_dict',intArgColumn:'fdicttype',intArg:'3008' })
      .then((response) => {
        this.fclassstnoOptions = response.data.data.list;
      })
      .catch(() => {
        this.fclassstnoOptions = [];
      });
  },
  computed: {
    headers() {
      return {
        'Authorization': getToken()
      }
    }
  },
  methods: {
    datetimeFormat(row, column) {
      const date = row[column.property]
      if (date === undefined || date === null) {
        return ''
      }
      return moment(date).format('YYYY-MM-DD HH:mm:ss')
    },
    uploadFileSuccess: function(response) {
      this.uploadVisible = false
      this.$notify.success({
        title: '导入',
        dangerouslyUseHTMLString:true,
        message: response.data
      })
    },
    handleUpload(){
      this.uploadVisible = true
    },
     // 存储分类
    formatfstorageflag: function (row, column) {
      if (this.fstorageflagOptions.length > 0) {
        for (let i = 0; i < this.fstorageflagOptions.length; i++) {
          if (row.fstorageflag === this.fstorageflagOptions[i].value) {
            return this.fstorageflagOptions[i].label;
          }
        }
        return "";
      } else {
        return "";
      }
    },
    getList() {
      this.listLoading = true
      if(this.listQuery.fpackno == ''){
        this.listQuery.fpackno = null
      }
      listtsPack(this.listQuery)
        .then(response => {
          this.list = response.data.data.list
          this.total = response.data.data.total
          this.listLoading = false
        })
        .catch(() => {
          this.list = []
          this.total = 0
          this.listLoading = false
        })
    },
    handleFilter() {
      this.listQuery.page = 1
      this.getList()
    },
    resetForm() {
      this.dataForm = {
         fpackno: undefined,
        fpackname: undefined,
        fgoodno: undefined,
        fbarcode: undefined,
        fengname: undefined,
        fclassstno: undefined,
        fspec: undefined,
        funit: undefined,
        fbuyprice: undefined,
        fstorageflag: undefined,
        fcolor: undefined,
        fweight: undefined,
        fvolume: undefined,
        fweight: undefined,
        fupddate: undefined,
        foperator: undefined,
      }
    },
    handleCreate() {
      this.resetForm()
      this.dialogStatus = 'create'
      if (this.fstorageflagOptions.length > 0) {
        this.dataForm.fstorageflag = this.fstorageflagOptions[0].value;
      }
      this.dataForm.fsiteNo = this.$store.state.user.fsiteNo
      this.dataForm.fclassstno= (this.fclassstnoOptions[0].value).toString();
      this.dialogFormVisible = true
      this.$nextTick(() => {
        this.$refs['dataForm'].clearValidate()
      })
    },
    createData() {
      this.$refs['dataForm'].validate(valid => {
        if (valid) {
          createtsPack(this.dataForm)
            .then(response => {
              this.list.unshift(response.data.data)
              this.dialogFormVisible = false
              this.$notify.success({
                title: '成功',
                message: '添加容器资料成功'
              })
            })
            .catch(response => {
              this.$notify.error({
                title: '失败',
                message: response.data.data
              })
            })
        }
      })
    },
    handleUpdate(row) {
      this.dataForm = Object.assign({}, row)
      this.dialogStatus = 'update'
      this.dataForm.fsiteNo = this.$store.state.user.fsiteNo;
      this.dialogFormVisible = true
      this.$nextTick(() => {
        this.$refs['dataForm'].clearValidate()
      })
    },
    updateData() {
      this.$refs['dataForm'].validate(valid => {
        if (valid) {
          updatetsPack(this.dataForm, this.$route.query.id)
            .then(() => {
              for (const v of this.list) {
                if (v.fgoodno === this.dataForm.fgoodno) {
                  const index = this.list.indexOf(v)
                  this.list.splice(index, 1, this.dataForm)
                  break
                }
              }
              this.dialogFormVisible = false
              this.$notify.success({
                title: '成功',
                message: '更新容器资料成功'
              })
            })
            .catch(response => {
              this.$notify.error({
                title: '失败',
                message: response.data.data
              })
            })
        }
      })
    },
    handleDelete(row) {
      this.$confirm('是否要删除容器资料', '提示', {
        confirmButtonText: '确定',
        cancelButtonText: '取消',
        type: 'warning'
      }).then(() => {
        deletetsPack(row)
          .then(response => {
            this.$notify.success({
              title: '成功',
              message: '删除容器资料成功'
            })
            const index = this.list.indexOf(row)
            this.list.splice(index, 1)
          })
          .catch(response => {
            this.$notify.error({
              title: '失败',
              message: response.data.data
            })
          })
      }).catch(()=>{})
    },
    indexMethod(index) {
      index = index + 1
      return index
    }
  }
}
</script>